<template>
	<view class="home">
		<view class="status_bar">
		</view>
		<view class="home-header">
			<view class="logo">My Girl's Blog</view>
			<view class="title">喜欢花 喜欢浪漫 喜欢你 ~ </view>
		</view>
		<view class="banner">
			<u-swiper interval="5000" circular :list="bannerlist" height="350" radius="0"></u-swiper>
			<view class="card">
				<view class="left">
					<image src="https://q1.qlogo.cn/g?b=qq&nk=923840997&s=640" class="leftimg"></image>
					<view class="lefttitle">小孙</view>
				</view>
				<view class="conter">
					<div class="love-icon">
						<ul>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
							<li></li>
						</ul>
					</div>
				</view>
				<view class="right">
					<image src="https://q1.qlogo.cn/g?b=qq&nk=2714130704&s=640" class="rightimg"></image>
					<view class="righttitle">冰冰</view>
				</view>
			</view>
		</view>
		<view class="content"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerlist: [
					'https://img.gejiba.com/images/b0d44ed67e25235f552aacbe32d81b5c.jpg',
					'https://img.gejiba.com/images/b0d44ed67e25235f552aacbe32d81b5c.jpg',
					'https://img.gejiba.com/images/b0d44ed67e25235f552aacbe32d81b5c.jpg',
				]
			}
		},
		methods: {

		}
	}
</script>


<style lang="scss" scoped>
	.home {
		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		}

		.home-header {
			z-index: 1;
			position: fixed;
			width: 100vw;
			height: 55px;
			left: 0;
			top: 0;
			background: #ffffff1f;
			backdrop-filter: blur(15px);
			color: #ffffff;

			.logo {
				float: left;
				font-size: 22px;
				line-height: 55px;
				font-weight: 900;
				padding: 0 10px;
			}

			.title {
				float: right;
				font-size: 16px;
				line-height: 55px;
				padding: 0 10px;
			}
		}

		.banner {
			z-index: 0;

			.card {
				width: 90vw;
				height: 150px;
				background: #ffffff1f;
				backdrop-filter: blur(3px);
				margin: -250px auto 0;
				border-radius: 16px;
				box-shadow: 0 0 20px 0px #0000002b;
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.left {
					width: 33%;

					.leftimg {
						width: 70px;
						height: 70px;
						border-radius: 10px;
						margin: 30px auto 10px;
						display: block;
						border: 2px solid #fff;
					}

					.lefttitle {
						text-align: center;
						color: #fff;
						font-weight: 900;
					}
				}

				.conter {
					width: 33%;

					.love-icon {
						display: flex;
						justify-content: center;
						align-items: center;
						margin: 70px 0 0 0;

						ul {
							height: 50px;
							list-style: none;
							padding: 0;

							li {
								float: left;
								width: 5px;
								height: 5px;
								border-radius: 20px;
								margin-right: 3px;
							}

							li:nth-child(1) {
								background-color: #f62e74;
								animation: love1 4s infinite;
							}

							li:nth-child(2) {
								background-color: #f45330;
								animation: love2 4s infinite;
								animation-delay: 0.15s;
							}

							li:nth-child(3) {
								background-color: #ffc883;
								animation: love3 4s infinite;
								animation-delay: 0.3s;
							}

							li:nth-child(4) {
								background-color: #30d268;
								animation: love4 4s infinite;
								animation-delay: 0.45s;
							}

							li:nth-child(5) {
								background-color: #006cb4;
								animation: love5 4s infinite;
								animation-delay: 0.6s;
							}

							li:nth-child(6) {
								background-color: #784697;
								animation: love4 4s infinite;
								animation-delay: 0.75s;
							}

							li:nth-child(7) {
								background-color: #ffc883;
								animation: love3 4s infinite;
								animation-delay: 0.9s;
							}

							li:nth-child(8) {
								background-color: #f45330;
								animation: love2 4s infinite;
								animation-delay: 1.05s;
							}

							li:nth-child(9) {
								background-color: #f62e74;
								animation: love1 4s infinite;
								animation-delay: 1.2s;
							}
						}

						@keyframes love1 {

							30%,
							50% {
								height: 15px;
								transform: translateY(-7.5px);
							}

							75%,
							100% {
								height: 5px;
								transform: translateY(0);
							}
						}

						@keyframes love2 {

							30%,
							50% {
								height: 32px;
								transform: translateY(-17.5px);
							}

							75%,
							100% {
								height: 5px;
								transform: translateY(0);
							}

						}

						@keyframes love3 {

							30%,
							50% {
								height: 46px;
								transform: translateY(-23px);
							}

							75%,
							100% {
								height: 5px;
								transform: translateY(0);
							}
						}

						@keyframes love4 {

							30%,
							50% {
								height: 50px;
								transform: translateY(-18.5px);
							}

							75%,
							100% {
								height: 5px;
								transform: translateY(0);
							}
						}

						@keyframes love5 {

							30%,
							50% {
								height: 50px;
								transform: translateY(-14.5px);
							}

							75%,
							100% {
								height: 5px;
								transform: translateY(0);
							}
						}
					}
				}

				.right {
					width: 33%;

					.rightimg {
						width: 70px;
						height: 70px;
						border-radius: 10px;
						margin: 30px auto 10px;
						display: block;
						border: 2px solid #fff;
					}

					.righttitle {
						text-align: center;
						color: #fff;
						font-weight: 900;
					}
				}
			}
		}

		.content {
			background: #fff;
			border-radius: 10px 10px 0 0;
			width: 100vw;
			height: 190vh;
			z-index: 0;
			position: absolute;
			margin: 49px 0;
		}
	}
</style>